@inherits VocaDb.Web.Code.VocaDbPage
@using Res = ViewRes.TagSelectionsStrings

<!-- TagsEditViewModel -->

<div data-bind="dialog: {autoOpen: false, modal: true, width: 500 }, dialogButtons: [{ text: '@ViewRes.SharedStrings.Save', click: save }], dialogVisible: dialogVisible" 
	 style="display:none;" title="@ViewRes.SharedStrings.Tags">

	<div class="trackProperties">

		<p>@Res.Info</p>

		<div data-bind="foreach: selections">
			<span class="tag" data-bind="attr: { title: tag.additionalNames }">
				@* id is needed by jqButtonset. The binding also doesn't like ' in the id. *@
				<input type="checkbox" data-bind="id: 'tagSelection' + tag.name.replace(/\'/g, '_apos'), jqButtonset: selected" class="jqButton" />
				<label>
					<span data-bind="text: tag.name"></span>
				</label>
			</span>
		</div>
		<br />
		
		<div data-bind="visible: getSuggestions">
			<p>@Res.Suggestions</p>
			<div data-bind="visible: !suggestionsLoaded()">
				@Helpers.AjaxLoader()
			</div>
			<div data-bind="visible: suggestionsLoaded() && !suggestions().length">
				@Res.NoSuggestions
			</div>
			<div data-bind="foreach: suggestions, visible: suggestionsLoaded()">
				<span class="tag" data-bind="attr: { title: $parent.getSuggestionText($data, '@Res.Usages') }">
					<a href="#" data-bind="text: tag.name, click: function() { $parent.autoCompletedTag(tag); }, jqButton: { icon: 'ui-icon-plus' }"></a>
				</span>
			</div>
			<br />
		</div>

		<div class="form-inline">
			@Res.AddTag:
			<div class="input-append">
				<input type="text" class="input-large" maxlength="30" data-bind="textInput: newTagName, tagAutoComplete: autoCompletedTag, allowAliases: true, tagTarget: target" />
				<button type="button" class="btn" data-bind="click: addTag">@ViewRes.SharedStrings.Add</button>
			</div>
		</div>

	</div>

</div>
